<!--订单详情-->
<template>
	<div class="a">
		<van-nav-bar
		  title="评价详情"
		  left-arrow
		  :border="false"
		>	
		  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	    </van-nav-bar>	
        
        <div class="b">
        	<div class="b1">
        		<img :src="info.avatar" alt="" />
        	</div>
        	
        	<div class="b2">
        		<div class="c1">
        			<div class="d1">{{info.nickName}}</div>
        			<div class="d2">{{info.commentTxt}}</div>
        			<div class="d4">{{info.commentAddtime}}</div>
        			<div class="d5">
        				<div class="e1"><img :src="info.goodsImage" alt="" /></div>
        				<div class="e2">
        					<div class="f1">{{info.comName}}</div>
        					<div class="f2">交易成功时间 {{info.ordersFinishTime}}</div>
        				</div>
        			</div>
        		</div>
        		<div class="c2" v-if="info.commentIsgood>0">
        			<span class="d3">
        				<img src="../../../../../static/img/xiao.png" alt="" />
        			</span>
        		</div>
        	</div>
        	
        </div>

		
		<div class="interval"></div>
		
		
		
		<div class="h">
			<div class="i">
				<span class="i1"></span>
				<span class="i2">追评 * {{list.length}}</span>
			</div>
			<div class="j">
				<div class="item" v-for="item in list">
		        	<div class="b1">
		        		<img :src="item.avatar" alt="" />
		        	</div>
		        	
		        	<div class="b2">
		        		<div class="c1">
		        			<div class="d1">{{item.nickName}}</div>
		        			<div class="d2">{{item.commentTxt}}</div>
		        			<div class="d6" v-if="item.commentImage">
		        				<img :src="section" alt="" v-for="section in formatImg(item.commentImage)"/>
		        			</div>
		        			<div class="d4">{{item.commentAddtime}}</div>
		        		</div>
		        		<div class="c2" v-if="item.commentIsgood>0">
		        			<span class="d3">
		        				<img src="../../../../../static/img/xiao.png" alt="" />
		        			</span>
		        		</div>
		        	</div>					
				</div>			
			</div>
		</div>
		
		
		<div class="k">
			<div class="k1">
				<van-button color="#ffda44" block class="d2" @click="append">追加评价</van-button>
			</div>
		</div>
  
	</div>	
</template>

<script>
import {getFun,getTimer} from '@/api/publicFun.js'	 
let publicFun=getFun()		
export default {
	name: 'lookEvaluate',	
	data() {
       return {
          ordersId:'',
          userId:'',
          goodsId:'',
          url1:this.$api+'/marketorderservice/api/v1/market/commentInfo',
          url2:this.$api+'/marketorderservice/api/v1/market/listComment',
          info:{},
          list:[]
       }
	},
	methods: {	
      append(){
      	  let arg='[{"ordersId":"'+this.ordersId+'"},{"comId":"'+this.goodsId+'"}]' 
		  this.link('/market/order/appendEvaluate',arg)	            	
      },
      formatImg(str){
      	return str.split(',')
      },
      // 加载第一条数据
      getData1(){      	
      	let params1={
      		ordersId:this.ordersId,
      		userId:this.userId
      	}
      	let that=this
	    this.$Axios.Post(this.url1,params1)
	      .then(function(res) {
            that.info=res.commentInfo 
	    }) 	      	
      },
      // 加载列表
      getData2(){      	
      	let params1={
      		ordersId:this.ordersId,
      		userId:this.userId
      	}
      	let that=this
	    this.$Axios.Post(this.url2,params1)
	      .then(function(res) {
            that.list=res.list
	    }) 	      	
      }      
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.ordersId=this.$router.currentRoute.query.ordersId;
		this.userId=this.$router.currentRoute.query.userId;	
		this.goodsId=this.$router.currentRoute.query.comId
		this.getData1()
		this.getData2()
	}
}	
</script>

<style scoped="">
.a{background: #fff;height: 100%;width: 100%;position: absolute;}
.b{padding: 10px 15px;display: flex;}
.b1 img{width: 24px;height: 24px;display: block;border-radius: 4px;}
.b2{margin-left: 10px;display: flex;justify-content: space-between;flex: 1;}
.d1{color: #aaa;}
.d2{margin: 8px 0;font-size: 16px;width: 100%;word-break: break-all;display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;}
.d4{color: #aaa;margin-bottom: 8px;}
.d5{padding:10px;background: #f4f5f9;display: flex;align-items: center;}
.d5 img{width: 50px;height: 50px;display: block;border-radius: 4px;}
.e2{margin-left: 10px;}
.f1{margin-bottom: 8px;}
.f2{color: #aaa;}
.interval{background: #edeef3;height: 10px;}
.h{padding: 10px 15px 60px;}
.i{font-size: 16px;display: flex;}
.i1{width: 4px;display: block;margin-top: 3px;
height: 16px;background: #ffda44;margin-right: 8px;border-radius: 6px;}
.j{padding: 20px 0;}
.j .item{display: flex;}

.d6{display: flex;margin-bottom: 8px;}
.d6 img{display: block;width: 40px;height: 40px;border-radius: 4px;margin-right: 4px;}

.k{position: fixed;bottom: 0;left: 0;width: 100%;background: #fff;padding: 0 10px;}
.van-button__text{color: #000;font-size: 16px;}
</style>